@import "../library/_variable";
@import "../mixin/_media";


/*
コンテンツエリア

ページの内容を内包するコンテンツエリアのコンポーネントです。

Markup:
// `img` はスタイルガイドにおけるサンプル表示の都合上付与しています。
img(style="width:100%" src="")

Styleguide 4.0
*/


/*
コンテンツエリアのカラムレイアウト

ページのコンテンツ部分におけるカラムレイアウトを定義するコンポーネントです。`.c-contentsArea__cols`ではプライマリカラム、セカンダリカラムのレイアウトを定義します。

Markup:
+b.c-contentsArea
  +e.cols
    +e.primaryCol
    +e.secondaryCol
// `img` はスタイルガイドにおけるサンプル表示の都合上付与しています。
img(style="width:100%" src="")

Styleguide 4.1
*/

.c-contentsArea {
  margin-left: 220px;
  background: $paleBlue;
  @include media_middle {
    margin-left: 160px;
  }
  @include media_small {
    margin-left: 0;
  }
  &__cols {
    display: table;
    padding: 0 15px 60px;
    width: 100%;
  }
  &__primaryCol {
    display: table-cell;
    vertical-align: top;
  }
  &__secondaryCol {
    display: table-cell;
    width: 350px;
    vertical-align: top;
  }
}


/*
プライマリカラム

`.c-contentsArea__primaryCol`コンテンツ・入力フォームのうち主要なものを表示します。

Markup:
.c-primaryCol
// `img` はスタイルガイドにおけるサンプル表示の都合上付与しています。
img(style="width:100%" src="")

Styleguide 4.2
*/
.c-primaryCol {
}

/*
セカンダリカラム

`.c-contentsArea__secondaryCol`補助的なコンテンツ・入力フォームなどを表示します。
画面によっては存在しない場合があり、その場合はプライマリカラムがコンテンツエリアの幅100%で表示されます。

Markup:
.c-secondaryCol
// `img` はスタイルガイドにおけるサンプル表示の都合上付与しています。
img(style="width:100%" src="")

Styleguide 4.3
*/
.c-secondaryCol {
  margin-left: 15px;
}


/*
ブロック外コンテンツ

コンテンツエリア上部に配置されます。プライマリ・セカンダリのカラムより外側のコンテンツグループです。

Markup:
.c-contentsArea
  +b.c-outsideBlock
    +e.contents
// `img` はスタイルガイドにおけるサンプル表示の都合上付与しています。
img(style="width:100%" src="")

Styleguide 4.4
*/

.c-outsideBlock {
  width: 100%;
  &__contents {
    padding: 0 15px;
  }
}


/*
サブコンテンツ

主にマスター系ページに存在する「詳細検索」エリアのコンポーネントです。メニューの展開はBootstrapにて実装しております。詳細はBootstrapの<a href="https://getbootstrap.com/docs/4.0/components/collapse/" target="_blank">Collapse</a>ページをご確認下さい。

sg-wrapper:
  <script>
    collapseIconMinus();
    collapseIconPlus();
  </script>
<sg-wrapper-content/>

Markup:
.c-contentsArea(style="margin-left:0;")
  // `(style="margin-left:0;"` はスタイルガイドにおけるサンプル表示の都合上付与しています。
  +b.c-outsideBlock
    +e.contents
      .row.justify-content-start
        .col-6
          .d-inline-block.mb-3(data-toggle="collapse" href="#searchDetail" aria-expanded="false" aria-controls="searchDetail")
            a
              i.fa.fa-plus-square-o.font-weight-bold.mr-1
              span.font-weight-bold 詳細検索
    +b.c-subContents.collapse(id="searchDetail").ec-collapse
      .row.mb-2
        .col-6
          form.form-row.mb-2
            .col-6
              label.col-form-label カテゴリ
              select.form-control
                option 選んでください
                option ...
        .col-6
          form.form-row.mb-2
            .col-12
              p.col-form-label フィルタ
              .form-check.form-check-inline
                input.form-check-input#check_public(type='checkbox', value='')
                label.form-check-label(for="check_public") 公開
              .form-check.form-check-inline
                input.form-check-input#check_private(type='checkbox', value='')
                label.form-check-label(for="check_private")  非公開
              .form-check.form-check-inline
                input.form-check-input#check_stockout(type='checkbox', value='')
                label.form-check-label(for="check_stockout")  在庫切れ

Styleguide 4.5
*/
.c-subContents {
  background: $paleBlue100;
  margin-bottom: 10px;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  &::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent $paleBlue100 transparent;
    position: absolute;
    top: -9px;
    left: 10px;
  }
  &__action {
    text-align: center;
  }
}
